<template>
    <div>
        <p class="page_title" >
            这是一个用来测试的组件，组件传值、props 值修改、事件通信、插槽
        </p>
        <p class="the_title" >1、列表如下</p>
        <p>
            子组件接收列表数据，通过计算属性把 价格*2
        </p>
        <div>
            <ul v-if="setListPrice.length" >
                <li v-for="( item ) in setListPrice" :key="item" v-pull-fade >
                    <span>
                        {{ `名字：${item.name}      价格：${item.price}` }}
                    </span>
                     <span @click="delShop(item)" >
                        删除
                    </span>
                    <span @click="clickShopItem(item)" >
                        事件通信
                    </span>
                </li>
            </ul>
        </div>
        <p>
            下面展示插槽
        </p>
        <p class="the_title" >1、普通插槽 </p>
        <slot> 普通插槽，没有传任何东西，我将被展示 </slot>
        <p class="the_title" >2、具名插槽</p>
        <div style="color:#f40" >
            具名插槽列表，现在具名插槽 外部需要使用 template 作为模板，上面以 #:name 对应（这是简写）
            <slot name="content" ></slot>
        </div>
        <p class="the_title" >3、作用域插槽，使插槽访问子组件数据</p>
        <div>
            <p>这是子组件中的列表数据</p>
            <slot name="sltName" :sltNameList = "sltNameList"></slot> 
        </div>
    </div>
</template>

<script lang='ts' >
    import { defineComponent,PropType,computed,ref } from 'vue';

    export default defineComponent({
        name:'TestCompot',
        props:{
            list:{
                type: Array as PropType <AjaxDataModel.DataKey[]>,
                defalut: (): AjaxDataModel.DataKey[] => ([])
            }
        },
        emits:[ 'click-shop','click-del' ],
        setup( props, { emit,slots } ) {
            
            console.log(slots.content?.(),'插槽内容')

            const sltNameList = ref<number[]>([1,2,3,4,5,])

            const clickShopItem = ( item: AjaxDataModel.DataKey ): void => {
                    emit('click-shop',item)
            }

            const delShop = ( item: AjaxDataModel.DataKey ): void => {
                    emit('click-del',item)
            }

            const setListPrice = computed( (): AjaxDataModel.DataKey[] => {
                let heightPrice: AjaxDataModel.DataKey[] = []
                if(props.list?.length){
                    heightPrice = props.list
                    heightPrice.map((item)=>{
                        item.price = item.price as number * 2
                    })
                }
                return heightPrice
            } )

            return {
                setListPrice,
                sltNameList,
                clickShopItem,
                delShop
            }
        }
    }) 
</script>

<style lang="less" scoped>
    ul{
        li{
            padding: 10px 0;
            display: flex;
            align-items: center;
            justify-content: space-between;
            min-height: 50px;
            border-bottom: 1px solid #eee;
            span{
                min-height: 50px;
                display: flex;
                align-items: center;
                cursor: pointer;
                &:nth-child(1){
                    width: 60%;
                }
            }
        }
    }
</style>